<template>
  <div class="detail-movie">
    <!-- 电影信息 -->
    <van-card>
      <template #thumb>
        <van-image :src="info.images.small" fit="cover" />
      </template>
      <template #title>
        <h1>{{ info.title }}</h1>
      </template>
      <template #desc>
        <b>({{ info.year }})</b> <br />
      </template>
      <template #tags>
        <span style="color: #ccc">{{ info.countries[0] }} /</span>
        <span style="color: #ccc" v-for="item in info.genres" :key="item.id"> {{ item }} </span>
        <span style="color: #ccc">/ {{ info.pubdates[0] }} 上映 /</span>
        <span style="color: #ccc">{{ info.durations[0] }} </span>
      </template>
      <template #num>
        <van-tag
          v-for="item in info.genres"
          :key="item.id"
          plain
          type="danger"
          class="tags"
          color="#ccc"
          text-color="#f00"
        >
          {{ item }}
        </van-tag>
      </template>
    </van-card>
    <!-- 电影简介 -->
    <van-card>
      <template #title>
        <h3>简介</h3>
      </template>
      <template #tags>
        <div
          :class="flag ? '' : 'van-multi-ellipsis--l3'"
          style="text-indent: 24px"
        >
          {{ info.summary }}
        </div>
        <span :style="{ float: 'right', color: '#ccc' }" @click="moreInfo">
          {{ flag ? "收起" : "查看更多" }}
        </span>
      </template>
    </van-card>
    <!-- 演职表 -->
    <div class="cast-list">
      <div class="cast-list-title">
        <h3>演职表</h3>
        <span>全部<van-icon name="arrow" /></span>
      </div>
      <div class="cast-list-content">
        <van-grid :border="false" :column-num="4">
          <van-grid-item>
            <template #icon>
              <van-image :src="info.directors[0].avatars.small" fit="contain" />
            </template>
            <template #text>
              {{ info.directors[0].name }}
            </template>
          </van-grid-item>
          <van-grid-item v-for="item in casts" :key="item.id">
            <template #icon>
              <van-image :src="item.avatars.small" fit="contain" />
            </template>
            <template #text>
              {{ item.name }}
            </template>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
    <!-- 预告片 -->
    <div class="notice">
      <div class="notice-title">
        <h3>预告片 / 剧照</h3>
        <span>全部<van-icon name="arrow" /></span>
      </div>
      <div class="notice-content">
        <div class="trailer">
          <!-- 预告片剧照列表 -->
          <van-grid :column-num="1">
            <van-grid-item v-for="item in trailer" :key="item.id">
              <template #icon>
                <van-image
                  :src="item.small"
                  fit="contain"
                  @click="isShow(item.resource_url)"
                >
                </van-image>
              </template>
              <template #text>
                <span class="van-ellipsis">{{ item.title }}</span>
              </template>
            </van-grid-item>
          </van-grid>
          <!-- 视频遮罩 -->
          <van-overlay :show="show">
            <template #default>
              <div class="wrapper" @click="isShow2" @click.stop ref="wrapper">
                <div>
                  <video controls width="100%" ref="video" />
                </div>
              </div>
            </template>
          </van-overlay>
        </div>
      </div>
    </div>
    <!-- 分割线 -->
    <van-divider
      :style="{
        color: '#ccc',
        borderColor: '#ccc',
        padding: '0 16px',
        height: '10px',
      }"
    />
    <!-- 短评 -->
    <div class="short-comment">
      <div class="short-comment-title">
        <h3>
          短评
          <van-icon name="question-o" />
        </h3>
        <router-link :to="{name: 'Comment',params: {id: id}}" style="color:#fff" >
          全部
          <span>
            {{ info.comments_count }}
            <van-icon name="arrow" />
          </span>
        </router-link>
      </div>
      <div class="short-comment-content">
        <div class="card">
          <van-card v-for="item in popular_comments" :key="item.id">
            <template #title>
              <div>
                <van-image radius="50%" :src="item.author.avatar" fit="contain" />
                  <div class="userInfo">
                    <span class="userName">{{ item.author.name }}</span>
                    <span class="userBe">
                      <van-rate
                        v-model="item.rating.value"
                        :size="12"
                        color="#f99900"
                        void-icon="star"
                        void-color="#eee"
                      />
                      {{ item.created_at.split(' ')[0] }}
                    </span>
                  </div>
              </div>
              <!-- 操作 -->
              <van-icon name="ellipsis" style="font-size: 24px"/>
            </template>
            <template #price>
              <div style="text-indent: 24px; color: #fff;" >
                {{ item.content }}
              </div>
            </template>
            <template #footer>
              <div class="dot">
                <van-icon name="thumb-circle-o" style="font-size: 18px" />
                {{ item.useful_count }}
              </div>
              <van-divider
                :style="{
                  color: '#ccc',
                  borderColor: '#ccc',
                  padding: '0 16px',
                  height: '10px',
                }"
              />
            </template>
          </van-card>
        </div>
      </div>
    </div>
    <!-- 影评 -->
    <div class="review_show">
      <van-cell center title="影评" @click="review_show = true">
        <template #title>
          <van-icon name="minus" class="review_show_tag" />
          <span><b>影评</b></span>
        </template>
      </van-cell>
    </div>
    <div class="review">
      <van-action-sheet
        v-model="review_show"
      >
        <template #description>
          <van-icon
            name="minus"/>
        </template>
        <template #default>
          <div class="bg_c">
            <div class="review_content"
              v-for="(item,index) in review"
              :key="index"
            >
              <div class="user">
                <van-image :src="item.author.avatar" fit="contain"  />
                <span class="user_name ">
                  {{ item.author.name }}
                </span>
              </div>
              <div class="user_title">
                <h3>{{ item.title }}</h3>
              </div>
              <div class="user_content van-multi-ellipsis--l2">
                {{ item.summary }}
              </div>
              <div class="user_useful">
                <span>592回复 ·</span>
                <span>5435有用 ·</span>
                <span>125转发 ·</span>
              </div>
            </div>
          </div>
        </template>
      </van-action-sheet>
    </div>
  </div>
</template>

<script>
import { getDetail } from '@/api/home'
export default {
  name: 'detail',
  data () {
    return {
      id: this.$route.params.id, // 影片ID
      info: {}, // 影片详情数据
      rate: {}, // 影片评分
      tags: [], // 影片标签
      flag: false,
      casts: [], // 演职表
      trailer: [], // 预告剧照数据
      show: false,
      popular_comments: [], // 短评
      review: [], // 影评
      review_show: false,
    }
  },
  methods: {
    moreInfo () {
      this.flag = !this.flag
    },
    isShow (url) {
      this.show = true
      if (this.show) {
        this.$refs.video.src = url
        this.$refs.wrapper.style.display = 'flex'
        this.$refs.video.play()
      }
    },
    isShow2 () {
      this.show = false
      if (!this.show) {
        this.$refs.video.pause()
        this.$refs.wrapper.style.display = 'none'
      }
    },
  },
  computed: {

  },
  components: {},
  created () {
    getDetail(this.id)
      .then((res) => {
        // console.log(res)
        // 所有信息
        this.info = res
        // 电影标签
        this.tags = res.tags
        // 演职表
        this.casts = res.casts
        // 预告片
        this.trailer = res.trailers
        // 剧照
        this.photos = res.photos
        // 短评
        this.popular_comments = res.popular_comments
        // 影评
        this.review = res.popular_reviews
        const id = this.id
        const images = res.images
        const title = res.title
        const current = {
          id,
          title,
          images, // .small
        }
        // 修改 store 中的数据
        this.$store.commit('historyToUse', current)
      })
      .catch(console.log)

    const { id, images, title } = this.info
    const current = {
      id,
      title,
      images, // .small
    }
    // 修改 store 中的数据
    this.$store.commit('historyToUse', current)
  },
}
</script>

<style lang='less' scoped>
.detail-movie {
  background-color: #66503d;
  h1,
  h3 {
    margin: 0;
    padding: 0;
  }
  .van-card__thumb {
    height: auto;
  }
  .tags {
    padding: 2px 6px;
    margin: 0 2px;
  }
  .van-card {
    background-color: #66503d;
    color: #ffffff;
  }
  .cast-list {
    color: #ffffff;
    .cast-list-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      background-color: #66503d;
    }
    margin-top: 20px;
    .cast-list-content {
      width: 100vw;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none !important;
      }
    }
    /deep/ .van-grid-item__content {
        background:#66503d;
    }
    h3 {
      background-color: #66503d;
    }
    .van-grid {
      display: flex;
      flex-flow: row nowrap;
      width: 700px;
      font-size: 10px;
      margin: 0 0 20px 0;
      background-color: #66503d;
    }
  }
  .notice {
    color: #ffffff;
    .notice-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      background-color: #66503d;
    }
    margin-top: 20px;
    .notice-content {
      width: 100vw;
      overflow-x: scroll;
      &::-webkit-scrollbar {
        display: none !important;
      }
      .van-grid-item__content {
        padding: 5px 0;
      }
      .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        .video {
          width: 100vw;
        }
      }
      /deep/ .van-grid-item__content {
            background:#66503d;
        }
      /deep/ .van-grid-item__content::after ,
      .van-hairline--top::after {
        display: none;
      }
    }
    h3 {
      background-color: #66503d;
    }
    .van-grid {
      display: flex;
      flex-flow: row nowrap;
      justify-content: flex-start;
      align-items: center;
      width: 999px;
      font-size: 10px;
    }
  }
  .short-comment {
    background-color: #403227;
    color: #ffffff;
    border-radius: 15px;
    margin: 5px 10px;
    padding: 5px 10px;
    .short-comment-title {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      margin: 10px 0;
    }
    .short-comment-content {
      .van-card {
        background-color: #403227;
        .van-card__content > div {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
        }
        .van-card__content > div > div {
          display: flex;
          .userInfo {
            display: flex;
            flex-flow: column;
            justify-content: space-around;
            margin-left: 10px;
            .userBe {
              display: flex;
              flex-flow: column;
            }
          }
        }
        .van-card__bottom {
          margin-top: 10px;
        }
        .van-card__footer {
          display: flex;
          flex-flow: column;
          justify-content: flex-end;
          * {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 0 5px;
          }
        }
        .van-card__price {
          flex-flow: column;
        }
      }
    }
  }
  .review {
        .review_content {
          box-sizing: border-box !important;
        }
    /deep/ .van-action-sheet__description {
      font-size: 48px !important;
      padding: 0 !important;
    }
    .van-action-sheet__content {
      background-color: #f1f0ee;
    }
    .bg_c {
        background-color: #f1f0ee;
      /deep/ .review_content {
        background-color: #ffffff;
        width: 100vw;
        padding: 10px 20px;
        margin: 10px 0;
        border-radius: 15px;
        display: flex;
        flex-flow: column;
        align-items: flex-start;
        justify-content: center;
        * {
          margin: 2px 0;
        }
        .user {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: start;
          .van-image__img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
          span {
            margin-left: 10px;
          }
        }
        .user_useful {
          font-size: 14px;
        }
      }
    }
  }
  .review_show {
    margin-top: 44px;
    .van-cell {
      position: fixed;
      bottom: 0;
      right: 0;
      padding: 0;
      margin: 0;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
      .van-cell__title {
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: center;
        .review_show_tag {
          font-size: 24px;
        }
      }
    }
  }
}
</style>
